#app{
    position: relative;
    height: 100vh;
    background-image: url("https://dogefs.s3.ladydaily.com/~/source/unsplash/photo-1682007049179-ea0223283a90?ixid=M3wyNjY4NDZ8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTY4NzU5NDQwNnw&ixlib=rb-4.0.3&w=2560&h=1440&fmt=webp");
    background-size: 100% 100%;
    display: flex;
}
.app-sidebar{
    position: relative;
    width: 50px;
    background-color: aqua;
}
.app-main{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.app-main .header{
    height: 56px;
}
.app-main .app-date-box{
    text-align: center;
    color: #fff;
}
.app-time{
    font-size: 80px;
}
.app-main .serch{
    height: 94px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.serch-left{
    min-width: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background-color: #fff;
    border-top-left-radius: 32px;
    border-bottom-left-radius: 32px;
}
.serch-baidu::before{
    content: '\e612';
    line-height: 46px;
    color: blue;
    display: inline-block;
    text-align: center;
    background-color: #fff;
}
.serch-xiala::before{
    content: '\e65c';
    color: #bababa;
}
.serch .serch-center{
    width: 470px;
    height: 46px;
    background-color: #fff;

}
.serch .serch-right::before{
    content: '\e694';
    font-size: 16px;
    color: #333;
    min-width: 46px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    display: inline-block;
    background-color: #fff;
    border-top-right-radius: 32px;
    border-bottom-right-radius: 32px;
}
.app-main .content{
    /* background-color: rgba(150, 236, 10, 0.5); */
    width: 70%;
    flex: 1 1 0;
    margin: 0 auto;
    display: grid;
    grid-gap: 30px;
    grid-template-columns: repeat(14, 1fr);
    grid-template-rows: repeat(4, 1fr);
    justify-content: flex-start;
}
.content .item{
   border-radius: 16px;
}
.content .item:first-child {
    grid-column: 1/5;
    grid-row: 1;
    text-align: center;
}
.content .item:hover {
    box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);/* 盒子悬浮时阴影 */
}
.content .item:nth-child(2) {
    grid-column: 5/9;
    grid-row: 1;
    text-align: center;
}
.content .item:nth-child(3) {
    grid-column: 9/11;
    grid-row: 1;
    text-align: center;
}
.content .item:nth-child(4) {
    grid-column: 11/13;
    grid-row: 1;
    text-align: center;
}
.content .item:nth-child(5) {
    grid-column: 13/15;
    grid-row: 1;
    text-align: center;
}
.content .item:nth-child(6) {
    grid-column: 1/5;
    grid-row: 2;
    text-align: center;
}
.content .item:nth-child(7) {
    grid-column: 5/7;
    grid-row: 2;
    text-align: center;
}
.content .item:nth-child(8) {
    grid-column: 7/9;
    grid-row: 2;
    text-align: center;
}
.content .item:nth-child(9) {
    grid-column: 9/11;
    grid-row: 2;
    text-align: center;
}
.content .item:nth-child(10) {
    grid-column: 11/13;
    grid-row: 2;
    text-align: center;
}
.content .item:nth-child(11) {
    grid-column: 13/15;
    grid-row: 2;
    text-align: center;
}
.content .item:nth-last-child(-n+14) {
    height: 80px;
    grid-row: 3;
    text-align: center;
}
/* .content .item:nth-last-child(-n+11) {
    width: 50px;
    grid-column: 1/6;
    grid-row: 2;
    text-align: center;
} */
.app-main .yiyan{
    padding-top: 10px;
    text-align: center;
    font-weight: 700;
    font-size: 12px;
    color: #fff;
    cursor: pointer;
}
.name{
    display: block;
    opacity: 0;
    padding: 10px;
    transition: all 0.2s ease-in 0s;
}
.yiyan:hover .name{
    opacity: 100;
}